<template>
  <div class="">
    <el-tabs v-model="activeName" :active-name="activeName" @tab-click="handleClick">
      <el-tab-pane :label="$t('callServiceSkillGroup.callServiceSkillGroup1')" name="callServiceSkillGroup">
      </el-tab-pane>
      <el-tab-pane :label="$t('configLazyLoad.agentConfig.netGroup')" name="internetChannelSkillGroup">
      </el-tab-pane>
      <el-tab-pane :label="$t('configLazyLoad.agentConfig.mailGroup')" name="emailChannelSkillGroup">
      </el-tab-pane>
      <el-tab-pane :label="$t('configLazyLoad.agentConfig.businessGroup')" name="businessSkillGroup">
      </el-tab-pane>
    </el-tabs>
    <keep-alive>
      <component :is="activeName" class="right"></component>
    </keep-alive>
  </div>
</template>
<script>
  import callServiceSkillGroup from './callServiceSkillGroup/index'
  import internetChannelSkillGroup from './internetChannelSkillGroup/index'
  import emailChannelSkillGroup from './emailChannelSkillGroup/index'
  import businessSkillGroup from './businessSkillGroup/index'
  export default {
    name: 'ChannelSkillGroup',
    data () {
      return {
        activeName: 'callServiceSkillGroup'
      }
    },
    components: {
      callServiceSkillGroup,
      internetChannelSkillGroup,
      emailChannelSkillGroup,
      businessSkillGroup
    },
    methods: {
      handleClick (tab) {
        this.activeName = tab.name
      }
    },
    beforeMount () {
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
</style>
